<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>进制转换器</title>
	</head>
	<style>
		.warp {
			width: 550px;
			border: 1px solid #ddd;
			margin: 150px auto 10px auto;
			box-shadow: 0px 0px 10px #4d4d4d;
			background: rgba(246, 246, 246, 1);
			padding-bottom: 20px;
		}

		h5 {
			text-align: center;
		}

		.warp .item-group {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			margin-bottom: 10px;
		}

		.item-group button {
			width: 125px;
			height: 30px;
		}

		.active {
			background: #c7c7c7;
		}

		input {
			width: 530px;
			height: 30px;
			display: block;
			margin: 20px auto 10px auto;
		}
	</style>
	<body>
		<div class="warp" id="title">
			<h5>进制转换器</h5>
			<input type="text" placeholder="在此输入带转换数字" id="in" />
			<div class="item-group">
				<button value="1" onclick="test(1)">二进制转八进制</button>
				<button value="2" onclick="test(2)">八进制转二进制</button>
				<button value="3" onclick="test(3)">十进制转二进制</button>
				<button value="4" onclick="test(4)">十六进制转二进制</button>
			</div>
			<div class="item-group">
				<button value="5" onclick="test(5)">二进制转十进制</button>
				<button value="6" onclick="test(6)">八进制转十进制</button>
				<button value="7" onclick="test(7)">十进制转八进制</button>
				<button value="8" onclick="test(8)">十六进制转八进制</button>
			</div>
			<div class="item-group">
				<button value="9" onclick="test(9)">二进制转十六进制</button>
				<button value="10" onclick="test(10)">八进制转十六进制</button>
				<button value="11" onclick="test(11)">十进制转十六进制</button>
				<button value="12" onclick="test(12)">十六进制转十进制</button>
			</div>
			<input type="text" id="out" placeholder="转换结果" />
			<font color="#FF0000" style="font-size: 12px">
				*注：存在非法字符时，我们只截断有效字符进行转换
			</font>
		</div>
		<script language="javascript">
			function test(type) {
				let index = type - 1;
				let num = document.getElementById("in").value;
				let btns = document.querySelectorAll("#title button");
				let tynum = Number(btns[index].value),
					to;
				switch (tynum) {
					case 1:
						to = parseInt(num, 2).toString(8);
						break;
					case 2:
						to = parseInt(num, 8).toString(2);
						break;
					case 3:
						to = parseInt(num).toString(2);
						break;
					case 4:
						to = parseInt(num, 16).toString(2);
						break;
					case 5:
						to = parseInt(num, 2);
						break;
					case 6:
						to = parseInt(num, 8);
						break;
					case 7:
						to = parseInt(num).toString(8);
						break;
					case 8:
						to = parseInt(num, 16).toString(8);
						break;
					case 9:
						to = parseInt(num, 2).toString(16);
						break;
					case 10:
						to = parseInt(num, 8).toString(16);
						break;
					case 11:
						to = parseInt(num).toString(16);
						break;
					case 12:
						to = parseInt(num, 16);
						break;
				}
				for (let i = 0; i < btns.length; i++) {
					if (index == i) {
						btns[i].classList.add("active");
					} else {
						btns[i].classList.remove("active");
					}
				}
				if (String(to) === "NaN") to = "输入非法字符了哦";
				document.getElementById("out").value = to;
			}
		</script>
	</body>
</html>
